<template>
  <div>
    <el-form>
      <el-select
        class="elinput"
        v-model="nname"
        placeholder="根据难度查询题目列表"
        @focus="sele('/question/nd/list')"
        :loading="loading"
        @change="seleLists(`/question/nd/select/${nname}`)"
      >
        <el-option
          v-for="(v, i) in seleList"
          :key="i"
          :label="v.nname"
          :value="v.nid"
        ></el-option>
      </el-select>
      <el-select
        class="elinput"
        v-model="tname"
        placeholder="根据题型查询题目列表"
        @focus="sele('/question/type/list')"
        :loading="loading"
        @change="seleLists(`/question/type/select/${tname}`)"
      >
        <el-option
          v-for="(v, i) in seleList"
          :key="i"
          :label="v.tname"
          :value="v.tid"
        ></el-option>
      </el-select>
      <el-select
        class="elinput"
        v-model="sname"
        placeholder="查询同一课程的题目列表"
        @focus="sele('/question/type/list1')"
        :loading="loading"
        @change="seleLists(`/question/qdetails/select/${sname}`)"
      >
        <el-option
          v-for="(v, i) in seleList"
          :key="i"
          :label="v.sname"
          :value="v.sid"
        ></el-option>
      </el-select>
      <el-input
        class="elinput"
        placeholder="根据关键字查询题目列表"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button class="elbut" type="primary" icon="el-icon-search" @click="but"
        >搜索</el-button
      >
      <!-- 添加框 -->
      <Create />
    </el-form>
  </div>
</template>
<script>
import Create from "./create.vue";
export default {
  components: { Create },
  data() {
    return {
      //下拉框数据
      input: "",
      nname: "",
      tname: "",
      sname: "",
      //下拉框加载
      loading: false,
      //下拉框数据
      seleList: [],
    };
  },
  methods: {
    but() {
      if (this.input == "") {
        this.$message({
          message: "搜索框为空",
          type: "warning",
        });
        return;
      }
      this.$emit("vLoadings", true);
      this.axios.get(`/question/qdetails/get/${this.input}`).then((res) => {
        this.$emit("vLoadings", false);
        this.$emit("tableDatas", res.data);
      });
    },
    seleLists(val) {
      this.$emit("vLoadings", true);
      console.log(val);
      this.axios.get(val).then((res) => {
        this.$emit("vLoadings", false);
        this.$emit("tableDatas", res.data);
      });
    },
    sele(url) {
      this.loading = true;
      this.input = "";
      this.nname = "";
      this.tname = "";
      this.sname = "";
      this.axios.get(url).then((res) => {
        this.loading = false;
        this.seleList = res.data;
      });
    },
  },
};
</script>

<style scoped>
.elbut {
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.elinput {
  float: left;
  width: 200px;
  margin-right: 20px;
  margin-top: 20px;
}
</style>